<template>
	<view>
		<view class="container">
			<block v-if="item.is_buy">
				<n-real-time-location type="1" :driver_id="item.user_id"></n-real-time-location>
			</block>
			<block v-else>
				<u-swiper height="500" :list="item.images" :video="item.video" img-mode="aspectFit"></u-swiper>
			</block>
			<view class="info" v-if="item">
				<view class="order-status">
					<view class="">
						<view class="title-1 flex">
							行程详情
							<view class="ml-30">
								<u-icon name="eye" size="30" color="#cccccc"></u-icon>
								<text class="pl-5 size-30 gray-9 text-normal">{{item.pageviews}}</text>
							</view>
						</view>
						<view class="desc">
							该行程正在接单中…
						</view>
						<view class="desc" v-if="item.is_buy">
							距离出发<u-count-down :show-hours="true" :timestamp="item.cfsjsjc - nowDate"
								@end="item.is_buy = 0" fontSize="24"></u-count-down>
						</view>
						<view class="mt-20" v-if="item.voice">
							<n-voice :voice="item.voice"></n-voice>
						</view>
					</view>
					<view class="">
						<view class="price">
							¥{{item.price}}
						</view>
					</view>
				</view>
				
				<view class="address-list-1" v-if="type==2">
					<view class="flex-between py-20">
						<view class="list">
							<view class="item">
								<view v-if="item.start[0].day" class="badge">第{{item.start[0].day}}天</view>
								<image class="icon-36" src="../../static/icon_address.png" mode="widthFix"></image>
								<view class="name">
									{{item.start[0].name}}
								</view>
								<image @click="openStation(item.start[0])" class="icon-32" src="../../static/btn_see.png"
									mode="widthFix"></image>
							</view>
							<view class="item" v-for="(_item,i) in item.way" :key="i">
								<view v-if="_item.day" class="badge">第{{_item.day}}天</view>
								<view class="point"></view>
								<view class="name">
									{{_item.name}}
								</view>
								<image @click="openStation(_item)" class="icon-32" src="../../static/btn_see.png"
									mode="widthFix"></image>
							</view>
							<view class="item">
								<view v-if="item.end[0].day" class="badge">第{{item.end[0].day}}天</view>
								<image class="icon-36" src="../../static/icon_right.png" mode="widthFix"></image>
								<view class="name">
									{{item.end[0].name}}
								</view>
								<image @click="openStation(item.end[0])" class="icon-32" src="../../static/btn_see.png"
									mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="address-list" v-else>
					<view class="date">
						{{item.start_date}}
						{{item.start_time}}
						(星期{{item.create_time | week}})
					</view>
					<view class="flex-between py-20">
						<view @click="openMap" class="" v-if="!editStationShow">
							<n-small-map :location_list="location_list"></n-small-map>
							<!-- <map class="map" :markers="markers" :include-points="includePoints" :longitude="longitude"
								:latitude="latitude" :polyline="polyline"></map> -->
						</view>
						<view class="list">
							<view class="item">
								<image class="icon-36" src="../../static/icon_address.png" mode="widthFix"></image>
								<view class="name">
									{{item.start[0].name}}
								</view>
								<image @click="openStation(item.start[0])" class="icon-32" src="../../static/btn_see.png"
									mode="widthFix"></image>
							</view>
							<view class="item" v-for="(_item,i) in item.way" :key="i">
								<view class="point"></view>
								<view class="name">
									{{_item.name}}
								</view>
								<image @click="openStation(_item)" class="icon-32" src="../../static/btn_see.png"
									mode="widthFix">
								</image>
		
							</view>
							<view class="item">
								<image class="icon-36" src="../../static/icon_right.png" mode="widthFix"></image>
								<view class="name">
									{{item.end[0].name}}
								</view>
								<image @click="openStation(item.end[0])" class="icon-32" src="../../static/btn_see.png"
									mode="widthFix">
								</image>
							</view>
						</view>
					</view>
					<!-- <view class="more" @click="openMap">
						查看行程地图 <u-icon name="arrow-right" color="#519D76"></u-icon>
					</view> -->
				</view>
				<n-car :item="item"></n-car>
				<view class="car-info" v-if="item.car">
					<n-tousu :order_id="id" type="1"></n-tousu>
					<view class="item">
						<view class="title">
							座位
						</view>
						<view class="text">
							{{ item.num }}/{{item.seat}}座位
						</view>
					</view>
					<view class="item item-1">
						<view class="title">
							服务包含
						</view>
						<view class="text">
							{{item.service || '无'}}
						</view>
					</view>
					<view class="item item-1">
						<view class="title">
							备注
						</view>
						<view class="text">
							{{item.remarks || '无'}}
						</view>
					</view>
				</view>
			</view>
			
			<!-- 评论 -->
			<n-user-comment 
			v-if="item.user" :user="item.user" 
			:user_id="item.user_id" 
			:list="commentList" :status="status">
			</n-user-comment>
			
		</view>
		<!-- 底部操作栏 -->
		<view class="tabbar-bottom">
			<view class="menu">
				<button class="item" open-type="share" @click="share">
					<image class="icon-44" src="../../static/btn_share.png" mode="widthFix"></image>
					<view class="title">
						分享行程
					</view>
				</button>
				<view class="item" @click.stop="$tools.makePhone(item.mobile)">
					<image class="icon-44" src="../../static/btn_mobile.png" mode="widthFix"></image>
					<view class="title">
						拨打电话
					</view>
				</view>
				<view class="item" @click="joinGroup(item.im_group_id)">
					<image class="icon-44" src="../../static/btn_chat.png" mode="widthFix"></image>
					<view class="title" >
						加入群聊
					</view>
				</view>
				<view class="item" @click="collect">
					<image v-if="item.is_collection==1" class="icon-44" src="../../static/btn_collect.png"
						mode="widthFix"></image>
					<image v-else class="icon-44" src="../../static/btn_collect_1.png" mode="widthFix"></image>
					<view class="title">
						收藏
					</view>
				</view>
			</view>
			<view class="btn" @click="submit">
				立即预约
			</view>
		</view>
		<!-- 站点信息 -->
		<u-popup v-model="editStationShow" mode="bottom" border-radius="40" :closeable="true" close-icon="close-circle"
			close-icon-size="50" close-icon-color="#333">
			<view class="edit-station">
				<view class="cell flex-between border-bottom">
					<view class="title">
						站点名称
					</view>
					<view class="text">
						{{curStationIndex.name}}
					</view>
				</view>
				<view class="cell ">
					<view class="title">
						站点介绍
					</view>
					<view class="textarea">
						<u-input :disabled="true" v-model="curStationIndex.content" placeholder=" "
							type="textarea"></u-input>
					</view>
				</view>
				<view class="title-1">
					站点实拍：
				</view>
				<view class="pic-wrap">
					<view class="item" v-for="(item,i) in curStationIndex.images" :key="i">
						<image :src="item" mode="aspectFit" @click="$tools.previewImg(curStationIndex.images,i)">
						</image>
					</view>
					<view class="item" v-if="curStationIndex.video">
						<video :show-mute-btn="true" :src="curStationIndex.video"></video>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
	
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				id: '',
				item: '',
				includePoints: [],
				polyline: [{
					points: [],
					color: "#519D76",
					width: 3,
					arrowLine: true,
				}],
				location_list: [],
				longitude: '',
				latitude: '',
				markers: [],
				tagList: [],
				page: 1,
				commentList: [],
				status: 'loading', //loadmore loading / nomore
				type: '', //行程类型 1上下班 2旅游 3节假日
				editStationShow: false,
				curStationIndex: '',
				nowDate:''
			};
		},
		computed:{
			...mapState({
				shenheSwitch:state=>state.config.shenheSwitch
			})
		},
		onShareAppMessage() {
			return {
				path: `/pages/journey_detail/journey_detail?id=${this.id}&type=1`,
				title:`起点:${this.item.start[0].name},终点:${this.item.end[0].name} ${this.item.start_date} ${this.item.start_time},剩余${this.item.num}/${this.item.seat}座位`,
				imageUrl:this.item.images[0] || '',
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		onLoad(e) {
			this.nowDate = Date.parse(new Date()) / 1000;
			this.id = e.id
			this.type = e.type || ''
			this.getJourneyDetail()
		},
		onReachBottom() {
			if (this.status === 'nomore') {
				return
			}
			this.page++
			this.status = 'loading'
			this.getUserCenterCommentList()
		},
		methods: {
			share(){
				// #ifdef APP
				uni.share({
					provider:'weixin',
					type:5,
					scene:'WXSceneSession',
					title:`起点:${this.item.start[0].name},终点:${this.item.end[0].name} ${this.item.start_date} ${this.item.start_time},剩余${this.item.num}/${this.item.seat}座位`,
					imageUrl:this.item.images[0] || '',
					miniProgram:{
						id:'gh_0420b44bfb58',
						path: `/pages/journey_detail/journey_detail?id=${this.id}&type=1`,
						type:2,	//0-正式版； 1-测试版； 2-体验版
						webUrl:'',
					}
				})
				// #endif
			},
			joinGroup(groupID) {
				console.log(groupID)
				if(!groupID){
					this.$tools.toast('加群失败，请稍后重试')
					return
				}
				console.log(groupID)
				let promise = this.tim.joinGroup({
					groupID,
					type: this.TIM.TYPES.GRP_PUBLIC
				});
				promise.then((imResponse) => {
					switch (imResponse.data.status) {
						case this.TIM.TYPES.JOIN_STATUS_SUCCESS: // 加群成功
							console.log(imResponse.data.group); // 加入的群组资料
							uni.navigateTo({
								url: `/pages_message/chatRoom/chatRoom?userID=${groupID}&type=GROUP`
							})
							break;
						case this.TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已经在群中
							uni.navigateTo({
								url: `/pages_message/chatRoom/chatRoom?userID=${groupID}&type=GROUP`
							})
							console.log(imResponse.data.group); // 加入的群组资料
							break;
						default:
							break;
					}
				}).catch(function(imError) {
					console.warn('joinGroup error:', imError); // 申请加群失败的相关信息
				});
			
			},
			collect() {
				this.$api.itineraryCollection({
					itinerary_id: this.id
				}).then(res => {
					this.$tools.toast(res.msg)
					if (res.code == 1) {
						this.item.is_collection = !this.item.is_collection
					}
				})
			},
			// 查看站点信息
			openStation(e) {
				this.editStationShow = true
				this.curStationIndex = e
				console.log(this.curStationIndex)
				console.log(this.location_list)
			},

			getUserCenterCommentList() {
				this.$api.getUserCenterCommentList({
					user_id: this.item.user_id,
					page: this.page
				}).then(res => {
					if (res.code == 1) {
						if (this.page === res.data.last_page || res.data.total == 0) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
						this.commentList.push(...res.data.data)
					}
				})
			},
			getMarkers() {
				let markers = [{
						id: 1,
						latitude: this.location_list[0].latitude,
						longitude: this.location_list[0].longitude,
						iconPath: require('@/static/icon_start.png')
					},
					{
						id: 2,
						latitude: this.location_list[this.location_list.length - 1].latitude,
						longitude: this.location_list[this.location_list.length - 1].longitude,
						iconPath: require('@/static/icon_end.png')
					}
				]
				this.markers = markers
			},
			getPolyline() {
				let points = []
				this.latitude = this.location_list[0].latitude
				this.longitude = this.location_list[0].longitude
				this.location_list.forEach((item, i) => {
					points.push({
						latitude: item.latitude,
						longitude: item.longitude,
					})

				})
				this.polyline[0].points = points
				this.includePoints = points
				console.log(this.polyline)
				console.log(this.includePoints)
			},
			getJourneyDetail() {
				this.$api.journeyDetail({
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.item = res.data
						let location_list = []
						location_list.unshift(...this.item.start)
						location_list.push(...this.item.way)
						location_list.push(...this.item.end)
						this.location_list = location_list
						this.getPolyline()
						this.getMarkers()
						this.getUserCenterCommentList()
						// let seat_image = res.data.car.seat_image
						// this.seatCanvas(seat_image)
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			seatCanvas(seat_image){
				
			},
			submit() {
				if(this.shenheSwitch=='1'){
					this.$tools.toast('请联系平台客服进行预约')
				}else{
					uni.navigateTo({
						url: './payment?id=' + this.id
					})
				}
			},
			openMap() {
				let location_list = []
				location_list.unshift(...this.item.start)
				location_list.push(...this.item.way)
				location_list.push(...this.item.end)
				uni.setStorageSync('location_list', location_list)
				uni.navigateTo({
					url: '/pages_release/map/map'
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}
	.container {
		/* #ifdef MP */
		height: calc(100vh - 140upx);
		overflow-y: scroll;
		/* #endif */
	}
	.map {
		width: 320upx;
		height: 400upx;
		border-radius: 16upx;
		overflow: hidden;
	}

	.address-list-1 {
		padding: 20upx 20upx 30upx;
		border-bottom: 1upx solid #EFEFEF;
		line-height: 1;

		.date {
			font-size: 26upx;
			color: #FF8E1C;
		}

		.list {
			border-left: 1upx solid #CCCCCC;
			flex: 1;
			margin-left: 68upx;

			.item {
				@include flex-between;
				margin: 0 0 40upx;
				position: relative;

				.badge {
					font-size: 20upx;
					font-weight: 400;
					color: #FF8E1C;
					padding: 4upx 0;
					border: 1upx solid #FF8E1C;
					border-radius: 4px;
					width: 68upx;
					text-align: center;
					position: absolute;
					left: -98upx;
				}

				.name {
					flex: 1;
					padding-left: 30upx;
					font-size: 24upx;
					color: #999999;
				}

				.icon-36 {
					margin-left: -18upx;
				}

				.point {
					width: 12upx;
					height: 12upx;
					margin-right: 12upx;
					background: #CCCCCC;
					border-radius: 50%;
					margin-left: -6upx;
				}
			}

			.item:first-child,
			.item:last-child {
				.name {
					font-size: 26upx;
					font-weight: 500;
					color: #333333;
				}
			}

			.item:last-child {
				margin-bottom: 0;
			}
		}

		.btn-change {
			min-width: 88upx;

			image {
				margin-left: 50upx;
			}
		}

	}

	.address-list {
		padding: 30upx 0;
		border-bottom: 1upx solid #EFEFEF;
		line-height: 1;
		margin: 24upx 0;
		border-radius: 16upx;
		background: #fff;

		.date {
			font-size: 26upx;
			color: #FF8E1C;
		}

		.list {
			border-left: 1upx solid #CCCCCC;
			padding-left: 40upx;

			.item {
				@include flex-between;

				.name {
					flex: 1;
					padding-left: 30upx;
					font-size: 24upx;
					color: #999999;
					padding-right: 20upx;
				}

				.icon-36 {
					margin-left: -18upx;
				}

				.point {
					width: 12upx;
					height: 12upx;
					margin-right: 12upx;
					background: #CCCCCC;
					border-radius: 50%;
					margin-left: -6upx;
				}
			}

			.item:not(:first-child) {
				margin-top: 40upx
			}

			.item:first-child,
			.item:last-child {
				.name {
					font-size: 26upx;
					font-weight: 500;
					color: #333333;
				}

				margin-bottom: 0;
			}
		}

		.more {
			font-size: 26upx;
			color: #519D76;
			text-align: center;
			padding-top: 30upx;
			margin-top: 30upx;
			line-height: 1;
			border-top: 1upx solid #EFEFEF;
		}

		.map {
			width: 320upx;
			height: 400upx;
			border-radius: 16upx;
			overflow: hidden;
		}
	}

	.info {
		padding: 0 30upx;
		background: #fff;

		.order-status {
			@include flex-between;
			padding: 30upx 0;
			border-bottom: 1upx solid #EFEFEF;
			line-height: 1;

			.title-1 {
				font-size: 34upx;
				font-weight: bold;
				color: #333333;
			}

			.desc {
				font-size: 26upx;
				color: #666666;
				margin-top: 20upx;
			}

			.price {
				font-size: 42upx;
				font-weight: bold;
				color: #328B5A;
			}
		}



		.car-info {
			padding: 10upx 0;

			.item {
				@include flex-between;
				margin: 20upx 0;
				.title {
					font-size: 30upx;
					color: #999999;
					white-space: nowrap;
				}

				.text {
					font-size: 30upx;
					color: #333333;
					padding-left: 30upx;
				}
			}
			.item-1{
				align-items: flex-start;
			}
		}

	}

	.tabbar-bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		@include flex;
		padding: 0 30upx;
		height: 140upx;
		background: #fff;
		border-top: 1upx solid #EFEFEF;

		.menu {
			@include flex-between;
			padding-right: 40upx;
			text-align: center;
			flex: 1;
			
			.item{
				line-height: 1.6;
				background-color:#fff;
				padding-left: 0;
				padding-right: 0;
				margin: 0;
			}
			
			.item:after{
				border: 0;
			}
			
			.title {
				font-size: 24upx;
				color: #999999;
			}
		}

		.btn {
			font-size: 30upx;
			font-weight: 500;
			color: #FFFFFF;
			width: 243upx;
			line-height: 80upx;
			background: #519D76;
			border-radius: 40upx;
			text-align: center;
		}
	}

	.edit-station {
		padding: 70upx 30upx 30upx;

		.cell {
			padding: 36upx 0;

			.title {
				font-size: 30upx;
				color: #999999;
				line-height: 1;
				white-space: nowrap;
				padding-right: 20upx;
			}

			.text {
				font-size: 32upx;
				font-weight: bold;
				color: #333333;
			}

			.textarea {
				min-height: 200upx;
				background: #F5F5F5;
				border-radius: 16upx;
				padding: 10upx 30upx;
				margin-top: 30upx;
			}
		}

		.title-1 {
			margin: 0;
			font-size: 26upx;
			font-weight: bold;
			color: #333333;
		}

		.border-bottom {
			border-bottom: 1upx solid #EFEFEF;
			;
		}

		.pic-wrap {
			@include flex;
			flex-wrap: wrap;
			margin-top: 30upx;

			.item {
				position: relative;
				margin-right: 15upx;
				margin-bottom: 15upx;
			
				image,
				video {
					width: 200upx;
					height: 200upx;
					border-radius: 8upx;
				}

				.del {
					width: 40upx;
					position: absolute;
					right: 0;
					top: 0;
					z-index: 1000;
				}
			}

			.item:nth-child(3n) {
				margin-right: 0;
			}

			.upload-btn {
				width: 200upx;
				height: 200upx;
				border-radius: 8upx;
			}
		}
	}
	/deep/ .car{
		padding: 0;
	}
</style>
